import {Component, OnDestroy, OnInit} from "@angular/core";
import {CommService} from "../comm-service";

declare var $: any;

@Component({
  template: `
    <div class="title">
      <div class="title_text">{{comptitle}}</div>
    </div>
    <div class="tabbable-custom">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#sczd" data-toggle="tab" (click)="tab('sczd')">手持终端</a>
          <!-- <div class="arrdowm"></div> -->
        </li>
        <li><a href="#dzbq" data-toggle="tab" (click)="tab('dzbq')">电子标签</a>
          <!-- <div class="arrdowm"></div> -->
        </li>
      </ul>
      <div class="tab-content">
        <!--手持终端-->
        <div class="tab-pane active" id="sczd">
          <div class="row">
            <form class="form-horizontal" role="form">
              <div class="col-lg-6">
                <div class="form-group">
                  <label class="col-lg-2 control-label">告警时间：</label>
                  <div class="col-lg-10">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                      <input type="text" class="form-control datetimepickerB_content" id="s_sbtime"
                             [value]="s_obj_sczd.kssj" readonly>
                      <span class="input-group-addon">至</span>
                      <input type="text" class="form-control datetimepickerE_content" id="s_edtime"
                             [value]="s_obj_sczd.jssj" readonly>
                      <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="control-label col-lg-3">设备名称：</label>
                  <div class="col-lg-9">
                    <input type="text" class="form-control" name="sbmc"/>
                  </div>
                </div>
              </div>
              <div class="col-lg-3">
                <div class="form-group">
                  <label class="control-label col-lg-4">考区名称：</label>
                  <div class="col-lg-8">
                    <input type="text" class="form-control" name="kqmc"/>
                  </div>
                </div>
              </div>
              <div class="col-lg-1">
                <button type="button" class="btn blue" (click)="inittable_sczd()">
                  <i class="fa fa-search"></i> 搜索
                </button>
              </div>
            </form>
          </div>
          <div class="row">
            <div class="col-lg-12" *ngIf="table_sczd">
              <my-table [o]="table_sczd"></my-table>
            </div>
          </div>
        </div>
        <!--电子标签-->
        <div class="tab-pane" id="dzbq">
          <div class="row">
            <form class="form-horizontal" role="form">
              <div class="col-lg-6">
                <div class="form-group">
                  <label class="col-lg-2 control-label">告警时间：</label>
                  <div class="col-lg-10">
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                      <input type="text" class="form-control datetimepickerB_content" id="s_sbtime"
                             [value]="s_obj_dzbq.kssj" readonly>
                      <span class="input-group-addon">至</span>
                      <input type="text" class="form-control datetimepickerE_content" id="s_edtime"
                             [value]="s_obj_dzbq.jssj" readonly>
                      <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="control-label col-lg-3">设备名称：</label>
                  <div class="col-lg-9">
                    <input type="text" class="form-control" name="sbmc"/>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="control-label col-lg-3">考区/考点名称：</label>
                  <div class="col-lg-8">
                    <input type="text" class="form-control" name="kqkdmc"/>
                  </div>
                </div>
              </div>
              <div class="col-lg-1">
                <button type="button" class="btn blue" (click)="inittable_dzbq()">
                  <i class="fa fa-search"></i> 搜索
                </button>
              </div>
            </form>
          </div>
          <div class="row">
            <div class="col-lg-12" *ngIf="table_dzbq">
              <my-table [o]="table_dzbq"></my-table>
            </div>
          </div>
        </div>
      </div>
    </div>

  `,
  styles: [
    ".title{width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);margin-bottom: 15px;}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
  ]
})
export class TjbbGjzlZHComponent implements OnInit, OnDestroy {
  comptitle: string = "手持终端/电子标签 告警总览";
  activetab: string = "sczd";
  s_obj_sczd: any = {
    crklx: "",
    kslx: "",
    kssj: "",
    jssj: ""
  };
  table_sczd: any;
  s_obj_dzbq: any = {
    crklx: "",
    kslx: "",
    kssj: "",
    jssj: ""
  };
  table_dzbq: any;

  tab(activetab: string): void {
    this.activetab = activetab;
    this.search_n();
  }

  search_n(): void {
    if (this.activetab == "sczd") {
      this.inittable_sczd();
    } else if (this.activetab == "dzbq") {
      this.inittable_dzbq();
    }
  }

  inittable_sczd(): void {
    const that = this;
    this.table_sczd = {
      tableid: "table_sczd",
      url: "sjgz/rwjh/cxsjcrklb",
      reqobj: "",
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "",
      columns: [{
        title: "序号",
        field: "zbmc",
      }, {
        title: "设备名称",
        field: "kdmc",
      }, {
        title: "ID",
        field: "sjbmc",
      }, {
        title: "试卷多拉",
        field: "sjbzt",
      }, {
        title: "试卷少拉",
        field: "dqdz",
      }, {
        title: "试卷错拉",
        field: "jwd",
      }, {
        title: "离线告警",
        field: "bh",
        //events: this.myevents,
        formatter: function (v) {
          let str: string = "";
          str += "<button type='button' class='btn btn-xs btn-info xq_yjjy'><i class='fa fa-search'></i> 详情</button>";
          return str;
        }
      }, {
        title: "超出范围",
        field: "jwd",
      }, {
        title: "超速",
        field: "jwd",
      }, {
        title: "停留",
        field: "jwd",
      }, {
        title: "低电",
        field: "jwd",
      }, {
        title: "故障"
      }]
    };
    this.table_sczd.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 50;
  }

  inittable_dzbq(): void {
    const that = this;
    this.table_dzbq = {
      tableid: "table_dzbq",
      url: "sjgz/rwjh/cxsjcrklb",
      reqobj: "",
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "",
      columns: [{
        title: "序号",
        field: "zbmc",
      }, {
        title: "试卷包名称",
        field: "kdmc",
      }, {
        title: "ID",
        field: "sjbmc",
      }, {
        title: "超出围栏",
        field: "sjbzt",
      }, {
        title: "出库异常",
        field: "dqdz",
      }, {
        title: "入库异常",
        field: "jwd",
      }, {
        title: "位置异常",
        field: "bh",
        //events: this.myevents,
        formatter: function (v) {
          let str: string = "";
          str += "<button type='button' class='btn btn-xs btn-info xq_yjjy'><i class='fa fa-search'></i> 详情</button>";
          return str;
        }
      }, {
        title: "蓝牙低电",
        field: "jwd",
      }, {
        title: "GNSS低电",
        field: "jwd",
      }, {
        title: "离线"
      }, {
        title: '故障'
      }]
    };
    this.table_dzbq.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 50;
  }

  /**
   * 处理搜索表格
   */
  createSearchForm(): void {
    $('.datetimepickerB_content').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 结束时间不能小于开始时间,
      $(".datetimepickerE_content").datetimepicker("setStartDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    $('.datetimepickerE_content').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 开始时间不能大于结束时间
      $(".datetimepickerB_content").datetimepicker("setEndDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    const initBdate = this.commservice.YMDHMS_get(Date.now() - 8 * 60 * 60 * 1000);
    const initEdate = this.commservice.YMDHMS_get(false);
    this.s_obj_sczd.kssj = initBdate;
    this.s_obj_sczd.jssj = initEdate;
  }

  constructor(private commservice: CommService) {

  }

  ngOnInit() {
    this.createSearchForm();
    this.inittable_sczd();
  }

  ngOnDestroy() {

  }

}
